<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 任务管理</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary">人力资源管理系统</h1>
      </div>

      <nav class="p-3">
        <ul>
          <li>
            <a href="index.html" class="sidebar-item">
              <i class="fa fa-dashboard"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="projects.html" class="sidebar-item">
              <i class="fa fa-briefcase"></i>
              <span>项目中心</span>
            </a>
          </li>
          <li>
            <a href="talents.html" class="sidebar-item">
              <i class="fa fa-users"></i>
              <span>人才库</span>
            </a>
          </li>
          <li>
            <a href="tasks.html" class="sidebar-item active">
              <i class="fa fa-tasks"></i>
              <span>任务管理</span>
            </a>
          </li>
          <li>
            <a href="reports.html" class="sidebar-item">
              <i class="fa fa-bar-chart"></i>
              <span>分析报表</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img id="userAvatar" src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p id="user" class="font-medium text-sm">张三</p>
            <p id="userRole" class="text-xs text-gray-500">项目经理</p>
          </div>
          <button id="logoutBtn" class="ml-auto text-gray-500 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
        <div class="flex items-center">
          <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <h2 id="pageTitle" class="text-lg font-semibold">任务管理</h2>
        </div>

        <div class="flex items-center gap-4">
          <div class="relative">
            <input type="text" placeholder="搜索..." id="globalSearch" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <button id="notificationBtn" class="relative text-gray-500 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span id="notificationCount" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
          </button>
        </div>
      </header>

      <!-- 页面内容 -->
      <div class="flex-1 overflow-y-auto p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-semibold">任务列表</h3>
          <button id="createTaskBtn" class="btn btn-primary bg-gradient-to-r from-blue-500 to-indigo-600">
            <i class="fa fa-plus mr-2"></i>新建任务
          </button>
        </div>

        <div class="overflow-x-auto">
          <table class="min-w-full bg-white rounded-xl overflow-hidden shadow-sm">
            <thead class="bg-gray-50 border-b border-gray-200">
              <tr>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属项目</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优先级</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止日期</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="font-medium text-sm">需求分析报告</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">企业官网重构</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <img src="https://picsum.photos/200/200?random=2" alt="李四" class="w-6 h-6 rounded-full object-cover">
                    <span class="text-sm">李四</span>
                  </div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-danger/20 text-danger">高</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">2023-06-15</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-warning/20 text-warning">进行中</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap text-sm text-gray-500">
                  <button class="text-primary hover:underline mr-3">详情</button>
                  <button class="text-gray-500 hover:text-primary">编辑</button>
                </td>
              </tr>
              <tr>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="font-medium text-sm">UI设计评审</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">移动应用开发</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <img src="https://picsum.photos/200/200?random=3" alt="王五" class="w-6 h-6 rounded-full object-cover">
                    <span class="text-sm">王五</span>
                  </div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-warning/20 text-warning">中</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">2023-06-18</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-warning/20 text-warning">进行中</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap text-sm text-gray-500">
                  <button class="text-primary hover:underline mr-3">详情</button>
                  <button class="text-gray-500 hover:text-primary">编辑</button>
                </td>
              </tr>
              <tr>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="font-medium text-sm">数据库设计</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">企业官网重构</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <img src="https://picsum.photos/200/200?random=4" alt="赵六" class="w-6 h-6 rounded-full object-cover">
                    <span class="text-sm">赵六</span>
                  </div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-danger/20 text-danger">高</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500">2023-06-20</div>
                </td>
                <td class="py-4 px-4 whitespace-nowrap">
                  <span class="badge bg-success/20 text-success">已完成</span>
                </td>
                <td class="py-4 px-4 whitespace-nowrap text-sm text-gray-500">
                  <button class="text-primary hover:underline mr-3">详情</button>
                  <button class="text-gray-500 hover:text-primary">编辑</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>

  <!-- 删除这两行重复的引入 -->
  <!-- <script src="js/api.js"></script> -->
  <!-- <script src="js/common.js"></script> -->
  <script>
    // 任务管理页面特定JS
    document.addEventListener('DOMContentLoaded', function() {
      // 新建任务按钮事件
      const createTaskBtn = document.getElementById('createTaskBtn');
      if (createTaskBtn) {
        createTaskBtn.addEventListener('click', function() {
          // 新建任务逻辑
          showToast('新建任务功能将在此处实现');
        });
      }

      // 初始化搜索功能
      const globalSearch = document.getElementById('globalSearch');
      if (globalSearch) {
        globalSearch.addEventListener('input', function(e) {
          const searchTerm = e.target.value.trim().toLowerCase();
          filterTasks(searchTerm);
        });
      }

      // 加载所有任务
      loadTasks();
    });

    // 加载所有任务
    function loadTasks() {
      showLoading();
      api.getAllTasks()
        .then(tasks => {
          renderTasks(tasks);
          hideLoading();
        })
        .catch(error => {
          console.error('加载任务失败:', error);
          hideLoading();
          showToast('加载任务失败，请重试', 'error');
        });
    }

    // 渲染任务列表
    function renderTasks(tasks) {
      const tableBody = document.querySelector('table tbody');
      if (tableBody) {
        tableBody.innerHTML = '';
        if (tasks.length === 0) {
          tableBody.innerHTML = `
            <tr>
              <td colspan="7" class="py-4 px-4 text-center text-gray-500">暂无任务数据</td>
            </tr>
          `;
          return;
        }

        tasks.forEach(task => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td class="py-4 px-4 whitespace-nowrap">
              <div class="font-medium text-sm">${task.title}</div>
            </td>
            <td class="py-4 px-4 whitespace-nowrap">
              <div class="text-sm text-gray-500">${task.projectName}</div>
            </td>
            <td class="py-4 px-4 whitespace-nowrap">
              <div class="flex items-center gap-2">
                <img src="${task.assigneeAvatar || 'https://picsum.photos/200/200?random=5'}" alt="${task.assigneeName}" class="w-6 h-6 rounded-full object-cover">
                <span class="text-sm">${task.assigneeName}</span>
              </div>
            </td>
            <td class="py-4 px-4 whitespace-nowrap">
              <span class="badge ${getPriorityBadgeClass(task.priority)}">${task.priority}</span>
            </td>
            <td class="py-4 px-4 whitespace-nowrap">
              <div class="text-sm text-gray-500">${task.deadline}</div>
            </td>
            <td class="py-4 px-4 whitespace-nowrap">
              <span class="badge ${getStatusBadgeClass(task.status)}">${task.status}</span>
            </td>
            <td class="py-4 px-4 whitespace-nowrap text-sm text-gray-500">
              <button class="text-primary hover:underline mr-3" onclick="viewTaskDetails(${task.id})">详情</button>
              <button class="text-gray-500 hover:text-primary" onclick="editTask(${task.id})">编辑</button>
            </td>
          `;
          tableBody.appendChild(row);
        });
      }
    }

    // 筛选任务
    function filterTasks(searchTerm) {
      showLoading();
      api.getAllTasks()
        .then(tasks => {
          const filteredTasks = tasks.filter(task =>
            task.title.toLowerCase().includes(searchTerm) ||
            task.projectName.toLowerCase().includes(searchTerm) ||
            task.assigneeName.toLowerCase().includes(searchTerm)
          );
          renderTasks(filteredTasks);
          hideLoading();
        })
        .catch(error => {
          console.error('筛选任务失败:', error);
          hideLoading();
          showToast('筛选任务失败，请重试', 'error');
        });
    }

    // 查看任务详情
    function viewTaskDetails(taskId) {
      showToast('查看任务详情功能将在此处实现');
    }

    // 编辑任务
    function editTask(taskId) {
      showToast('编辑任务功能将在此处实现');
    }

    // 辅助函数：根据优先级获取徽章颜色
    function getPriorityBadgeClass(priority) {
      switch(priority) {
        case '高':
          return 'bg-danger/20 text-danger';
        case '中':
          return 'bg-warning/20 text-warning';
        case '低':
          return 'bg-secondary/20 text-secondary';
        default:
          return 'bg-secondary/20 text-secondary';
      }
    }

    // 辅助函数：根据状态获取徽章颜色
    function getStatusBadgeClass(status) {
      switch(status) {
        case '已完成':
          return 'bg-success/20 text-success';
        case '进行中':
          return 'bg-warning/20 text-warning';
        case '未开始':
          return 'bg-secondary/20 text-secondary';
        case '已延期':
          return 'bg-danger/20 text-danger';
        default:
          return 'bg-secondary/20 text-secondary';
      }
    }
  </script>
</body>
</html>